<!-- todo 主布局 -->
<script setup>
import Sidebar from '@/components/Sidebar.vue'
import ContentArea from '@/components/ContentArea.vue'
</script>
<template>
  <div class="layout">
    <!-- 左侧导航区 -->
    <div class="nav">
      <Sidebar></Sidebar>
    </div>
    <!-- 右侧内容区 -->
    <div class="content">
      <ContentArea></ContentArea>
    </div>
  </div>
</template>
<style scoped lang="less">
.layout {
  display: flex;
  min-height: 100vh;
  background-color: #25272d;
  .nav {
    position: fixed;
    width: 80px;
    min-height: 100vh;
    z-index: 1000;
  }
  .content {
    flex: 1;
    background-color: #101014;
    color: white;
    min-height: 100vh;
    margin-left: 80px;
  }
}
</style>
